<%@ page import="com.zeking.bean.User" %>
<%@ page import="com.zeking.service.UserService" %>
<%@ page import="com.zeking.dao.BasePageBean" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: mac
  Date: 2020/12/2
  Time: 11:27 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<script>

    var tempUser = {
        "uid":0,
        "name":"",
        "sex":"",
        "birthday":"",
        "email":"",
        "note":"",
        "isadmin":"",
        "password":"",
    };

    // var tempName;

    <%!

        int  currentPage = 1;               // 当前页面
        int pageSize = 3;                   // 一页多少数据
        BasePageBean<User> basePageBean;
        int totalPage = 0;                  // 一共几页

        List<User> userList ;

        UserService userService = new UserService();


        User tempEditUser ;
    %>

    <%

        request.setCharacterEncoding("utf-8");

        String addOrEditOrDeteleFormAction = request.getParameter("addOrEditOrDeteleFormAction");
        System.out.println("addOrEditOrDeteleFormAction:"+addOrEditOrDeteleFormAction);
        if(addOrEditOrDeteleFormAction != null){

            if ( addOrEditOrDeteleFormAction.equals("selectItemAction") ){
                int selectItem = Integer.valueOf(request.getParameter("selectItem"));

                userList.get(selectItem).setCheck(!userList.get(selectItem).isCheck());



                int count = 0 ;
                for(int i =0 ;i < userList.size();i++){
                    if(userList.get(i).isCheck()){
                        count++;
                    }
                }

                if(count == 1){
                    for(int y =0 ;y < userList.size();y++){
                        if(userList.get(y).isCheck()){
                            tempEditUser = userList.get(y);
                            break;
                        }
                    }
                }else{
                    tempEditUser = null;
                }

            }else{

                if(addOrEditOrDeteleFormAction.equals("addAction")){ // 新增
                    User user = new User();

                    String addOrEditOrDeteleFormName = request.getParameter("addOrEditOrDeteleFormName");
                    String addOrEditOrDeteleFormSex = request.getParameter("addOrEditOrDeteleFormSex");
                    String addOrEditOrDeteleFormPassword = request.getParameter("addOrEditOrDeteleFormPassword");
                    boolean addOrEditOrDeteleFormIsAdmin = Boolean.valueOf(request.getParameter("addOrEditOrDeteleFormIsAdmin"));
                    String addOrEditOrDeteleFormBirthday = request.getParameter("addOrEditOrDeteleFormBirthday");
                    String addOrEditOrDeteleFormEmail = request.getParameter("addOrEditOrDeteleFormEmail");
                    String addOrEditOrDeteleFormNote = request.getParameter("addOrEditOrDeteleFormNote");

                    user.setName(addOrEditOrDeteleFormName);
                    user.setSex(addOrEditOrDeteleFormSex);
                    user.setPassword(addOrEditOrDeteleFormPassword);
                    user.setIsadmin(addOrEditOrDeteleFormIsAdmin);
                    user.setBirthday(addOrEditOrDeteleFormBirthday);
                    user.setEmail(addOrEditOrDeteleFormEmail);
                    user.setNote(addOrEditOrDeteleFormNote);

                    userService.addUser(user);

                }else if(addOrEditOrDeteleFormAction.equals("editAction")){ // 编辑
                    User user = new User();

                    int addOrEditOrDeteleFormUid = Integer.valueOf(request.getParameter("addOrEditOrDeteleFormUid"));
                    String addOrEditOrDeteleFormName = request.getParameter("addOrEditOrDeteleFormName");
                    String addOrEditOrDeteleFormSex = request.getParameter("addOrEditOrDeteleFormSex");
                    String addOrEditOrDeteleFormPassword = request.getParameter("addOrEditOrDeteleFormPassword");
                    boolean addOrEditOrDeteleFormIsAdmin = Boolean.valueOf(request.getParameter("addOrEditOrDeteleFormIsAdmin"));
                    String addOrEditOrDeteleFormBirthday = request.getParameter("addOrEditOrDeteleFormBirthday");
                    String addOrEditOrDeteleFormEmail = request.getParameter("addOrEditOrDeteleFormEmail");
                    String addOrEditOrDeteleFormNote = request.getParameter("addOrEditOrDeteleFormNote");

                    user.setUid(addOrEditOrDeteleFormUid);
                    user.setName(addOrEditOrDeteleFormName);
                    user.setSex(addOrEditOrDeteleFormSex);
                    user.setPassword(addOrEditOrDeteleFormPassword);
                    user.setIsadmin(addOrEditOrDeteleFormIsAdmin);
                    user.setBirthday(addOrEditOrDeteleFormBirthday);
                    user.setEmail(addOrEditOrDeteleFormEmail);
                    user.setNote(addOrEditOrDeteleFormNote);

                    System.out.println(user);

                    userService.updateUser(user);

                }else if(addOrEditOrDeteleFormAction.equals("deteleAction")){ // 删除
                    currentPage = 1;
                    for (int i =0 ; i< userList.size();i++){
                        if(userList.get(i).isCheck()){
                            userService.deleteUserByUid(userList.get(i).getUid());
                        }
                    }

                } else if ( addOrEditOrDeteleFormAction.equals("indexClickAction") ){
                    System.out.println("indexClickAction in");
                    // 接收 点击了 第几页
                    String indexClick = request.getParameter("indexClick");
                    System.out.println("indexClick:"+indexClick);
                    if(indexClick != null){
                     currentPage = Integer.valueOf(indexClick);
                    }
                }

                basePageBean = userService.getUserByLimit(currentPage,pageSize);
                totalPage = basePageBean.getTotalPage();
                userList = basePageBean.getData();

                if(addOrEditOrDeteleFormAction.equals("addAction")){
                    currentPage = totalPage ;
                    basePageBean = userService.getUserByLimit(currentPage,pageSize);
                    totalPage = basePageBean.getTotalPage();
                    userList = basePageBean.getData();
                }
            }

        } else {
            basePageBean = userService.getUserByLimit(currentPage,pageSize);
            totalPage = basePageBean.getTotalPage();
            userList = basePageBean.getData();
        }


    %>

    // tempUser.name ='dukciididi';
    tempUser.uid = <%=tempEditUser!=null?tempEditUser.getUid():0%>;
    tempUser.name = '<%=tempEditUser!=null?tempEditUser.getName():""%>';
    tempUser.sex = '<%=tempEditUser!=null?tempEditUser.getSex():""%>';
    tempUser.birthday = '<%=tempEditUser!=null?tempEditUser.getBirthday():""%>';
    tempUser.email = '<%=tempEditUser!=null?tempEditUser.getEmail():""%>';
    tempUser.note = '<%=tempEditUser!=null?tempEditUser.getNote():""%>';
    tempUser.isadmin = '<%=tempEditUser!=null?(tempEditUser.isIsadmin()?"是":"否"):""%>';
    tempUser.password = '<%=tempEditUser!=null?tempEditUser.getPassword():""%>';

    // 初始化表格
    function initUserList() {

        // 删除全部表格item
        $("tbody").children().remove();

        <%
            for (int i = 0; i < userList.size(); i++) {
        %>
        // 表格 item 的 底部颜色
        var inputStyle;
        if (<%=i % 2 == 0%>) {
            inputStyle = "info";
        } else {
            inputStyle = "warning";
        }

        var newTr;

        <%
            if(userList.get(i).isCheck()){
        %>
        newTr = $("<tr class= " + inputStyle + " ><td><input type=\"checkbox\" checked=\"checked\"  onclick=\"itemClick(" + <%=i%> +")\"  ></td><td><%=userList.get(i).getUid()%></td><td><%=userList.get(i).getName()%></td><td><%=userList.get(i).getSex()%></td><td><%=userList.get(i).getPassword()%></td><td><%=userList.get(i).isIsadmin()?"是":"否"%></td><td><%=userList.get(i).getBirthday()%> </td><td> <%=userList.get(i).getEmail()%></td><td> <%=userList.get(i).getNote()%></td></tr>");
        <%
            }else{
        %>
        newTr = $("<tr class= " + inputStyle + " ><td><input type=\"checkbox\" onclick=\"itemClick(" + <%=i%> +")\"  ></td><td><%=userList.get(i).getUid()%></td><td><%=userList.get(i).getName()%></td><td><%=userList.get(i).getSex()%></td><td><%=userList.get(i).getPassword()%></td><td><%=userList.get(i).isIsadmin()?"是":"否"%></td><td><%=userList.get(i).getBirthday()%> </td><td> <%=userList.get(i).getEmail()%></td><td> <%=userList.get(i).getNote()%></td></tr>");
        <%
            }
        %>


        $("tbody").append(newTr);
        <%
               }
        %>
    }

    // 第几页 的 点击事件
    function indexClick(i) {
        document.getElementById("addOrEditOrDeteleFormAction").value = 'indexClickAction';
        document.getElementById("indexClick").value = i;
        document.getElementById('passForm').submit();
    }







</script>


<body style="padding: 100px;" onload="initUserList()">

<p>
<h1>登录成功，欢迎<%= ((User) session.getAttribute("user")).getName() %>使用！</h1>
</p>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModalAdd">新增</button>
<button class="btn btn-primary" id="del" onclick="delItem()">删除</button>
<button class="btn btn-primary" id="edit" onclick="editItem()">编辑</button>
<br><br>

<form method="post" action="main.jsp" id="passForm">
    <input id='indexClick' type='hidden' name="indexClick">

    <input id='addOrEditOrDeteleFormAction' type='hidden' name="addOrEditOrDeteleFormAction">

    <input id='selectItem' type='hidden' name="selectItem">

    <input id='addOrEditOrDeteleFormUid' type='hidden' name="addOrEditOrDeteleFormUid">

    <input id='addOrEditOrDeteleFormName' type='hidden' name="addOrEditOrDeteleFormName">
    <input id='addOrEditOrDeteleFormSex' type='hidden' name="addOrEditOrDeteleFormSex">
    <input id='addOrEditOrDeteleFormPassword' type='hidden' name="addOrEditOrDeteleFormPassword">
    <input id='addOrEditOrDeteleFormIsAdmin' type='hidden' name="addOrEditOrDeteleFormIsAdmin">
    <input id='addOrEditOrDeteleFormBirthday' type='hidden' name="addOrEditOrDeteleFormBirthday">
    <input id='addOrEditOrDeteleFormEmail' type='hidden' name="addOrEditOrDeteleFormEmail">
    <input id='addOrEditOrDeteleFormNote' type='hidden' name="addOrEditOrDeteleFormNote">
</form>


<table class="table">
    <thead>
    <tr>
        <th></th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>密码</th>
        <th>是否管理员</th>
        <th>出生日期</th>
        <th>邮箱</th>
        <th>备注</th>
    </tr>
    </thead>

    <tbody>
    </tbody>
</table>

<br>

<div style="width: 100%;position: relative;alignment: center">
    <div style="position: relative;margin: auto;text-align: center;">
        <button class="btn btn-default" onclick="indexClick(1)">首页</button>
        <%
            for (int i = 1; i <= totalPage; i++) {
        %>
        <button class="<%=i!= currentPage?"btn btn-default":"btn btn-primary"%>" onclick="indexClick(<%=i %>)"><%=i %>
        </button>
        <%
            }
        %>


        <button class="btn btn-default" onclick="indexClick(<%=totalPage %>)">末页</button>
    </div>
</div>


<!--  新增弹框 -->
<div class="modal" id="myModalAdd" data-backdrop="static">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">

            <!-- 1.框的标题 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <!-- 2.框内信息 -->
            <div class="modal-body">

                <div class="form-group">
                    姓名：
                    <input type="text" id="addName">
                </div>
                <div class="form-group">
                    性别：
                    <input type="radio" name="addSex" value="男"> 男
                    <input type="radio" name="addSex" value='女'> 女
                </div>
                <div class="form-group">
                    密码：
                    <input type="text" id="addPassword">
                </div>
                <div class="form-group">
                    是否管理员：
                    <input type="radio" name="addIsAdmin" value="是"> 是
                    <input type="radio" name="addIsAdmin" value='否'> 否
                </div>
                <div class="form-group">
                    出生日期：
                    <input type="date" id="addDate">
                </div>
                <div class="form-group">
                    邮箱：
                    <input type="text" id="addEmail">
                </div>
                <div class="form-group">
                    备注：
                    <input type="text" id="addNote">
                </div>


            </div>
            <!-- 3.框的按钮 -->
            <div class="modal-footer">
                <button class="btn btn-info" id="add">确定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--  编辑弹框 -->
<div class="modal" id="myModalEdit" data-backdrop="static">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">

            <!-- 1.框的标题 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <!-- 2.框内信息 -->
            <div class="modal-body">

                <div class="form-group">
                    姓名：
                    <input type="text" id="editName">
                </div>
                <div class="form-group">
                    性别：
                    <input type="radio" name="editSex" value="男"> 男
                    <input type="radio" name="editSex" value='女'> 女
                </div>
                <div class="form-group">
                    密码：
                    <input type="text" id="editPassword">
                </div>
                <div class="form-group">
                    是否管理员：
                    <input type="radio" name="editIsAdmin" value="是"> 是
                    <input type="radio" name="editIsAdmin" value='否'> 否
                </div>

                <div class="form-group">
                    出生日期：
                    <input type="date" id="editDate">
                </div>

                <div class="form-group">
                    邮箱：
                    <input type="text" id="editEmail">
                </div>

                <div class="form-group">
                    备注：
                    <input type="text" id="editNote">
                </div>


            </div>
            <!-- 3.框的按钮 -->
            <div class="modal-footer">
                <button class="btn btn-info" id="editOk">确定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<script>
    // 新增 model 的 确定按钮
    $("#add").click(
        function () {

            // 姓名
            var name = document.getElementById('addName').value;

            // 性别
            var radio = document.getElementsByName('addSex');
            var sex = '';
            for (i = 0; i < radio.length; i++) {
                if (radio[i].checked) {
                    sex = radio[i].value;
                }
            }

            // 密码
            var password = document.getElementById('addPassword').value;

            // 是否是管理员
            var isAdminRadio = document.getElementsByName('addIsAdmin');
            var isAdmin = 'temp';

            if(isAdminRadio[0].checked){
                isAdmin = true;
            }else if(isAdminRadio[1].checked){
                isAdmin = false;
            }

            // 出生日期
            var date = document.getElementById('addDate').value;

            // 邮箱
            var email = document.getElementById('addEmail').value;

            // 备注
            var note = document.getElementById('addNote').value;

            if (name == '') {
                alert('请输入姓名');
                return;
            }

            if (sex == '') {
                alert('请选择性别');
                return;
            }

            if (password == '') {
                alert('请输入密码');
                return;
            }

            if (isAdmin == 'temp') {
                alert('请选择是否管理员');
                return;
            }

            if (email == '') {
                alert('请输入邮箱');
                return;
            }

            if (date == '') {
                alert('请输入出生日期');
                return;
            }


            // 清空数据
            document.getElementById('addName').value = '';
            for (i = 0; i < radio.length; i++) {
                if (radio[i].checked) {
                    radio[i].checked = false;
                }
            }
            document.getElementById('addPassword').value = '';
            for (i = 0; i < isAdminRadio.length; i++) {
                if (isAdminRadio[i].checked) {
                    isAdminRadio[i].checked = false;
                }
            }
            document.getElementById('addDate').value = '';
            document.getElementById('addEmail').value = '';
            document.getElementById('addNote').value = '';


            document.getElementById("addOrEditOrDeteleFormAction").value = 'addAction';

            document.getElementById("addOrEditOrDeteleFormName").value = name;
            document.getElementById("addOrEditOrDeteleFormSex").value = sex;
            document.getElementById("addOrEditOrDeteleFormPassword").value = password;
            document.getElementById("addOrEditOrDeteleFormIsAdmin").value = isAdmin;
            document.getElementById("addOrEditOrDeteleFormBirthday").value = date;
            document.getElementById("addOrEditOrDeteleFormEmail").value = email;
            document.getElementById("addOrEditOrDeteleFormNote").value = note;

            document.getElementById('passForm').submit();

            $("#myModalAdd").modal('hide');  // 关闭model
        }
    );

    // item 选中事件
    function itemClick(index) {
        document.getElementById("addOrEditOrDeteleFormAction").value = 'selectItemAction';
        document.getElementById("selectItem").value = index;
        document.getElementById('passForm').submit();
    }

    // 删除数据
    function delItem() {

        var checkboxs = $("input[type='checkbox']");  //
        let f = false;
        for (var i = 0; i < checkboxs.length; i++) {
            var box = checkboxs[i];
            if (box.checked) {  // 某个复选框被选中
                f = true;  // 标记 有 复选框被选中
            }
        }
        if(!f){
            alert("请先选中要删除的item");
        }else{
            document.getElementById("addOrEditOrDeteleFormAction").value = 'deteleAction';
            document.getElementById('passForm').submit();
        }

    }

    // 编辑数据 只支持 单条单条的编辑
    function editItem() {

        var checkboxs = $("input[type='checkbox']");  //
        var selectCount = 0;
        for (var i = 0; i < checkboxs.length; i++) {
            var box = checkboxs[i];
            if (box.checked) {  // 某个复选框被选中
                selectCount++;
            }
        }

        if(selectCount == 0 ){
            alert("请先选中要删除的item");
        }else if(selectCount > 1){
            alert("目前只支持单条编辑，请只选择一条数据进行编辑");
        }else {


            document.getElementById("editName").value = tempUser.name;

            var radio = document.getElementsByName("editSex");
            for (y = 0; y < radio.length; y++) {

                if (radio[y].value == tempUser.sex) {
                    radio[y].checked = 'checked';
                }
            }

            document.getElementById("editPassword").value = tempUser.password;

            var radio2 = document.getElementsByName("editIsAdmin");
            for (z = 0; z < radio2.length; z++) {

                if (radio2[z].value == tempUser.isadmin) {
                    radio2[z].checked = 'checked';
                }
            }

            document.getElementById("editDate").value = tempUser.birthday;
            document.getElementById("editEmail").value = tempUser.email;
            document.getElementById("editNote").value = tempUser.note;

            $("#myModalEdit").modal('show');
        }
    }


    // 编辑 model 的 确定按钮
    $("#editOk").click(
        function () {


            // 姓名
            var name = document.getElementById('editName').value;

            // 性别
            var radio = document.getElementsByName('editSex');

            var sex = '';
            for (i = 0; i < radio.length; i++) {
                if (radio[i].checked) {
                    sex = radio[i].value;
                }
            }

            // 密码
            var password = document.getElementById('editPassword').value;

            // 是否是管理员
            var isAdminRadio = document.getElementsByName('editIsAdmin');
            var isAdmin = 'temp';

            if(isAdminRadio[0].checked){
                isAdmin = true;
            }else if(isAdminRadio[1].checked){
                isAdmin = false;
            }

            // 出生日期
            var date = document.getElementById('editDate').value;

            // 邮箱
            var email = document.getElementById('editEmail').value;

            // 备注
            var note = document.getElementById('editNote').value;

            if (name == '') {
                alert('请输入姓名');
                return;
            }

            if (sex == '') {
                alert('请选择性别');
                return;
            }

            if (password == '') {
                alert('请输入密码');
                return;
            }

            if (isAdmin == 'temp') {
                alert('请选择是否管理员');
                return;
            }

            if (email == '') {
                alert('请输入邮箱');
                return;
            }

            if (date == '') {
                alert('请输入出生日期');
                return;
            }


            document.getElementById("addOrEditOrDeteleFormAction").value = 'editAction';

            document.getElementById("addOrEditOrDeteleFormUid").value = tempUser.uid;
            document.getElementById("addOrEditOrDeteleFormName").value = name;
            document.getElementById("addOrEditOrDeteleFormSex").value = sex;
            document.getElementById("addOrEditOrDeteleFormPassword").value = password;
            document.getElementById("addOrEditOrDeteleFormIsAdmin").value = isAdmin;
            document.getElementById("addOrEditOrDeteleFormBirthday").value = date;
            document.getElementById("addOrEditOrDeteleFormEmail").value = email;
            document.getElementById("addOrEditOrDeteleFormNote").value = note;

            document.getElementById('passForm').submit();

            $("#myModalEdit").modal('hide');  // 关闭model
        }
    );

</script>

</body>
</html>
